<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]-->
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="lib/select2/select2.min.css">
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <!--[if IE 6]-->
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->
    <title>新增服务与环境绑定关系</title>
</head>
<body>
<article class="page-container">
    <form  method="post" class="form form-horizontal" id="form-admin-role-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>服务：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box">
                    <select class="select" size="1" name="service" id="service">
                        <option value="" selected>请选择服务</option>
                    </select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>环境：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box">
                    <select class="select" size="1" name="env" id="env">
                        <option value="" selected>请选择环境</option>
                    </select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>Host：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="对应host信息" id="hostInfo" name="hostInfo">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">数据库信息：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!--<input type="text" class="input-text" value="" placeholder="" id="dbInfo" name="dbInfo">-->
                <textarea id="dbInfo" name="dbInfo" cols="" rows="" class="textarea valid" placeholder="请数据库信息..."></textarea>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">swagger地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="对应的swagger地址" id="swaggerUrl" name="swaggerUrl">
            </div>
        </div>
        <!--<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">测试类：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="测试类" id="clazz" name="clazz">
            </div>
        </div>-->
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius" id="admin-role-save" name="admin-role-save" onclick="addTenvDetail()"><i class="icon-ok"></i> 新增</button>
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/select2/select2.full.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>


<script type="text/javascript">
    //loading
    var layerIndex;
    $(function () {
        $.ajaxSetup({
            layerIndex:-1,
            beforeSend: function () { //插件加载前
                layerIndex = layer.load(1, { shade: [1.01, '#fff'] });
            },
            error: function () { //报错时执行
                layer.alert('显示异常，请刷新后重试', {
                    icon: 0,
                    skin: 'layer-ext-moon'
                });
            }
        });
    });

    function getServiceList(){
        var service=null;
        $.ajaxSetup({async : false});
        $.ajax({
            type: "post",
            url: "/tservice/selectByConditionSimple",
            data: {

            },
            dataType: "json",
            success: function (data) {
                var status=data.status;
                var msg=data.msg;
                if(status == 0){
                    service=data.data;
                }else{
                    layer.alert(data.msg, {
                        icon: 0,
                        skin: 'layer-ext-moon'
                    })
                }

            },
            fail:function (data) {
                layer.alert(JSON.stringify(data), {
                    icon: 0,
                    skin: 'layer-ext-moon'
                })
            },
            error: function(xhr) {
                layer.alert('Error' + JSON.stringify(xhr), {
                    icon: 2,
                    skin: 'layer-ext-moon'
                })
            }
        });
        return service;
    }

    function getTenvList(){
        var env=null;
        $.ajaxSetup({async : false});
        $.ajax({
            type: "post",
            url: "/tenv/selectAll",
            data: {

            },
            dataType: "json",
            success: function (data) {
                var status=data.status;
                var msg=data.msg;
                if(status == 0){
                    env=data.data;
                }else{
                    layer.alert(msg, {
                        icon: 0,
                        skin: 'layer-ext-moon'
                    })
                }

            },
            fail:function (data) {
                layer.alert(JSON.stringify(data), {
                    icon: 0,
                    skin: 'layer-ext-moon'
                })
            },
            error: function(xhr) {
                layer.alert('Error' + JSON.stringify(xhr), {
                    icon: 2,
                    skin: 'layer-ext-moon'
                })
            }
        });
        return env;
    }

    $(document).ready(function () {
        var serviceList=getServiceList();
        var env=getTenvList();
        var services="";
        for(i=0;i<serviceList.length;i++){
            var row=serviceList[i];
            var rowHtml="<option value=\""+row.id+"\">"+row.servicekey+"</option>";
            services=services+rowHtml;
        }
        $("#service").append(services);

        var dbinfo = "{\"driver\":\"com.mysql.jdbc.Driver\",\"url\":\"jdbc:mysql://127.0.0.1:3306/mydb\",\"username\":\"\",\"password\":\"\"}";
        var dbinfoJson = JSON.stringify(JSON.parse(dbinfo), null, 2);
        $("#dbInfo").val(dbinfoJson);

        var tenv="";
        for(k=0;k<env.length;k++){
            var row=env[k];
            var rowHtml="<option value=\""+row.id+"\">"+row.envkey+"</option>";
            tenv=tenv+rowHtml;
        }
        $("#env").append(tenv);
        layer.close(layerIndex);

    });

    //添加绑定关系
    function addTenvDetail(){
        var service = $("#service").val();
        var env = $("#env").val();
        var hostInfo = $("#hostInfo").val();
        var dbInfo = $("#dbInfo").val();
        var swaggerUrl = $("#swaggerUrl").val();
        // var clazz = $("#clazz").val();

        if(service == null || service == ""){
            layer.msg("请选择服务！");
            return;
        }else if(env == null || env == ""){
            layer.msg("请选择环境！");
            return;
        }else if(hostInfo == null || hostInfo == ""){
            layer.msg("host不能为空！");
            return;
        }else{
            $.ajax({
                type: "post",
                url: "/tservicedetail/insertOne",
                data: {
                    serviceid:service,
                    envid:env,
                    hostinfo:hostInfo,
                    dbinfo:dbInfo,
                    swaggerurl:swaggerUrl,
                    /*clazz:clazz,*/
                    status:1
                },
                dataType: "json",
                success: function (data) {
                    var status=data.status;
                    var msg=data.msg;
                    if(status == 0){
                        window.parent.pageSkip(1);;
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }else{
                        layer.close(layerIndex);
                        layer.alert(msg, {
                            icon: 0,
                            skin: 'layer-ext-moon'
                        })
                    }

                },
                fail:function (data) {
                    layer.close(layerIndex);
                    layer.alert(JSON.stringify(data), {
                        icon: 0,
                        skin: 'layer-ext-moon'
                    })
                },
                error: function(xhr) {
                    layer.close(layerIndex);
                    layer.alert('Error' + JSON.stringify(xhr), {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    })
                }
            });
        }

    }
</script>

</body>
</html>